<!--  -->
<template>
  <div class="toast" v-show="isShow">
      {{ msg }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg :'',
      isShow: false
    };
  },

  components: {},

  computed: {},

  mounted(){},

  methods: {
    show(msg,duration = 3000){
       this.msg = msg;
       this.isShow = true;
       setTimeout(()=>{
          this.msg = '';
          this.isShow = false
       },duration)
    }
  }
}

</script>
<style lang='scss' scoped>
.toast{
   padding: 15px 20px;
   border-radius: 5px;
   background: rgba(0,0,0,0.5);
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
   color: #fff;
   font-weight: bold;
   font-size: 18px;
}
</style>